<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 子元素选择器</title>
    <style type="text/css">

        /* 希望选择只作为 h1 元素子元素的 strong 元素 没有无限层级别 */
        h1 > strong{
            color: red;
        }

        /* 从左边到右边 只匹配 td 中*/
        table.company td >p{
            color: red;
        }
    </style>
</head>
<body>
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>  <!--  这种三层的就没有被改成红色 -->

    <!--  后代选择器 和 子选择器 结合使用的场景 -->
    <table  class="company">
        <tr>
            <th>City</th>
            <th>Town</th>
            <th>Viliage<p>这是一个段落</p></th>
        </tr>
        <tr>
            <td>邵阳<p>这是 td 中的一个段落</p></td>
            <td>潮州<p>这是 td 中的一个段落</p></td>
            <td>厦门<strong>这是 td 中的一个段落</strong></td>
        </tr>
    </table>
</body>
</html>